<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        .enter {
            width: 600px;
            height: 350px;
            border: 1px solid;
            border-radius: 5px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -70%);
            box-shadow: 2px 2px 9px gray;
        }

        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        form>label {
            display: block;
            height: 45px;
        }

        form>.btn {
            margin-top: 25px;
        }

        form>.btn button {
            font-size: 16px;
            display: block;
            float: left;
            margin: 0 15px;
            padding: 5px;
            text-decoration: none;
            border: 1px solid black;
            border-radius: 5px;
            text-align: center;
            box-shadow: 2px 2px 5px grey;
            background-color: #fff;
            color: rgb(80, 80, 80);
            cursor: pointer;
        }

        form a {
            text-decoration: none;
            font-size: 16px;
            color: rgb(80, 80, 80);
            display: block;
            margin-top: 20px;
        }

        .error {
            display: block;
        }
    </style>
</head>

<body>
    <div class="enter">
        <form action="/reg" method="post" id="reg">
            <h2>账号注册</h2>
            <span style="color: brown;font-size: 12px;">
                <%=warning%>
            </span>
            <label for="">
                <span>账&emsp;&emsp;号: </span>
                <input type="text" name="account" id="user" autocomplete="off">
                <span style="color: brown;font-size: 12px;" class="error"></span>
            </label>
            <label for="">
                <span>密&emsp;&emsp;码: </span>
                <input type="password" name="password" id="pwd" autocomplete="off" maxlength="12">
                <span style="color: brown;font-size: 12px;" class="error"></span>
            </label>
            <label for="">
                <span>重复密码: </span>
                <input type="password" id="repwd" autocomplete="off" maxlength="12">
                <span style="color: brown;font-size: 12px;" class="error"></span>
            </label>
            <div class="btn"><button>提交</button></div>
            <a href="/">返回首页</a>
        </form>
    </div>
    <script>
        let reg = document.querySelector("#reg");
        let user = document.querySelector("#user");
        let pwd = document.querySelector("#pwd");
        let repwd = document.querySelector("#repwd");
        let flag = false;
        // 定义事件对象
        let arr = [
            {
                name: user,
                blankError: "账号不能为空!",
                r: /(?=^[A-Za-z])[-_a-zA-Z0-9]{4,16}$/,
                formatError: "4到16位,必须由字母开头"
            },
            {
                name: pwd,
                blankError: "密码不能为空!",
                r: /(?=.*[A-Z])(?=.*[a-z])[A-Za-z\d$@!%*#?&]{6,}$/,
                formatError: "最少6位,包括至少一个大写字母和小写字母"
            },
            {
                name: repwd,
                blankError: "密码不能为空!",
                r: /(?=.*[A-Z])(?=.*[a-z])[A-Za-z\d$@!%*#?&]{6,}$/,
                formatError: "最少6位,包括至少一个大写字母和一个小写字母"
            },
        ]
        // 不同的错误提示
        function blurFn({name,blankError,r,formatError}) {
            name.addEventListener("blur",function (event) {
                let span = this.nextElementSibling;
                if (!this.value) {
                    span.innerText = blankError;
                } else if (!r.test(this.value)) {
                    span.innerText = formatError;
                } else {
                    span.innerText = "";
                }
            })
        }
        // 字符串正则匹配
        function verifyFn({name,r}){
            return r.test(name.value);
        }
        // 重复密码验证
        function rePwdFn({name,blankError,r,formatError}){
            name.addEventListener("blur",function(){
                let next = this.nextElementSibling;
                if(!this.value){
                    next.innerText = blankError;
                }else{
                    if(this.value===pwd.value){
                        if (r.test(this.value)){
                            flag = true;
                            next.innerText = "";
                        }else{
                            next.innerText = formatError;
                        }
                    }else{
                        next.innerText = "重复密码与密码不一致";
                    }
                }
            })
        }
        // 最终提交验证
        function loginFn(arr){
            return arr.reduce((pre,item,index)=>{
                return pre*=verifyFn(item);
            },flag)
        }
        blurFn(arr[0]);
        blurFn(arr[1]);
        rePwdFn(arr[2]);
        reg.onsubmit = function(event){
            if((!loginFn(arr))){
                alert("请检查账号或密码格式是否正确!")
                event.preventDefault();
            }
        }
    </script>
</body>

</html>